<template>
	<view class="content">
		<view class="information-title">
			<img src="@/static/img/pay/line.png" alt="">
			<text>评价{{commentList.length?commentList.length:0}}</text>
		</view>
		<view class="comments-row" v-for="(item,index) in commentList" :key="index">
			<view class="comments-peo">
				<img :src="item.face || ''" alt="" class="header-img">
				<view class="name-date">
					<text class="name">{{item.member.nickName?item.member.nickName:'C**执着'}}</text>
					<text class="date">{{item.member.createTime?item.member.createTime:'2022-10-09'}}</text>
				</view>
				<view class="evaluation">
					<text>{{item.grade.toFixed(1)}}</text>
					<u-rate :current="item.grade" :disabled="true" active-color="#faad39"></u-rate>
				</view>
			</view>
			<view class="comments-text">
				<text>{{item.userEvaluate || '--'}}</text>
			</view>
			<view class="comments-msg">
				<view class="msg">
					<img src="@/static/img/courseBuy/comments.png" alt="" @tap="commentsApply(item)">
					<text>{{item.replyNum}}</text>
				</view>
				<view class="praise">
					<img src="@/static/img/courseBuy/praise2.png" alt="" @click="getLike(item.id)" v-if="index % 2 === 0">
					<img src="@/static/img/courseBuy/praise.png" alt="" @click="getLike(item.id)" v-if="index % 2 !== 0">
					<text>{{item.likes}}</text>
				</view>
			</view>
		</view>
		<!-- 加载更多 -->
		<view @click="addRandomData" class="view-more">
			{{ isAdd ? "查看更多" : "没有更多了" }}
		</view>
		<!-- 回复评论footer -->
		<view class="apply-footer" >
			<view class="course-comments">
				<view class="comments-input">
					<u-input :clearable="false" placeholder="说点儿什么..." v-model="inputVal" />
				</view>
				<view class="search-information">
					<view class="" style="color: #f73935;" @click="submitComment">
						发表评价
					</view>
				</view>
			</view>
		</view>
		<!-- 评论 -->
		<!-- <view class="comments-modal">
			<u-popup v-model="isShowCommentsModal" mode="bottom" @close="modalClose">
				<view class="comments-grade">
					<view class="comments-img">
						<img :src="commentsImg.current >= 1 ? commentsImg.selected : commentsImg.slecet" alt=""
							@tap="choose(1)">
						<img :src="commentsImg.current >= 2 ? commentsImg.selected : commentsImg.slecet" alt=""
							@tap="choose(2)">
						<img :src="commentsImg.current >= 3 ? commentsImg.selected : commentsImg.slecet" alt=""
							@tap="choose(3)">
						<img :src="commentsImg.current >= 4 ? commentsImg.selected : commentsImg.slecet" alt=""
							@tap="choose(4)">
						<img :src="commentsImg.current == 5 ? commentsImg.selected : commentsImg.slecet" alt=""
							@tap="choose(5)">
					</view>
					<text>{{choose()}}星好评，课程非常棒！</text>
				</view>
				<view class="commets-input">
					<u-input v-model="commentsVal" :auto-height="true" maxlength="390" :clearable="false"
						type="textarea" placeholder="快来说说学习感受..." />
					<view v-if="commentsImg.src.length" class="add-img-row">
						<view class="add-img-detail" v-for="(item,index) in commentsImg.src" :key="index"
							:style="(index + 1 - 2)%3 == 0 ? 'margin: 12rpx 30rpx' : ''">
							<img :src="item" alt="" class="add">
							<img src="@/static/img/courseBuy/del.png" alt="" class="del" @tap="delImg(index)">
						</view>
					</view>
				</view>
			</u-popup>
		</view> -->
		<!-- 回复评论 -->
		<view class="apply-modal">
			<u-popup v-model="applyShow" mode="bottom" @close="applyClose">
				<view class="mb-60" v-for="(item,index) in applyData" :key="item.id">
					<text class="apply-num">{{applyData.length?applyData.length:'0'}}条回复</text>
					<view class="published">
						<view class="userInformation">
							<img :src="item.member.face?item.member.face:''" alt="">
							<view class="information">
								<text class="name">{{item.member.nickName}}</text>
								<text class="date">{{item.createTime}}</text>
							</view>
						</view>
						<view class="praise">
							<img src="@/static/img/courseBuy/praise2.png" v-if="false">
							<img src="@/static/img/courseBuy/praise.png" v-if="true">
							<text>{{item.likes?item.likes:'0'}}</text>
						</view>
					</view>
					<text class="text">{{item.details}}</text>
				</view>
				<!-- 回复评论 -->
				<!-- <view class="apply">
					<view class="apply-row" v-for="(item,index) in applyData.children" :key="index">
						<view class="published">
							<view class="userInformation">
								<img :src="item.member.face" alt="">
								<view class="information">
									<text class="name">{{item.member.nickName}}</text>
									<text class="date">{{applyData.date}}</text>
								</view>
							</view>
							<view class="praise">
								<img src="@/static/img/courseBuy/praise2.png" alt="">
								<text>{{applyData.praise}}</text>
							</view>
						</view>
						<text class="text">回复 <text class="username">{{applyData.member.nickName}}</text>
							{{applyData.details}}</text>
					</view>
					<text class="search-all">查看全部回复</text>
				</view> -->
			</u-popup>
		</view>
		<!-- 提示框 -->
		<u-toast ref="uToast" duration="1000" back="false" class="common-toast" />
	</view>
</template>

<script>
	import {
		API
	} from '@/config/myApi.js';
	export default {
		name: "newsComment",
		props: {
			// commentList: {
			// 	type: Array,
			// 	default: () => [{}, {}],
			// }
		},
		data() {
			return {
				isAdd:false,// 是否加载
				isShowCommentsModal: false,
				// 评价
				inputVal:"",
				//评论分数，添加图片评论
				commentsImg: {
					selected: '../../static/img/courseBuy/collect2.png',
					slecet: '../../static/img/courseBuy/collect3.png',
					current: 4,
					src: [],
				},
				//评论输入框内容
				commentsVal: '',
				//回复评论弹窗显示
				applyShow: false,
				//回复评论数据
				applyData: [{
					// children: Array(1)
					commentType: 1,
					createBy: 1376364798236688400,
					createTime: "2022-10-10 15:55:36",
					deleteTime: null,
					details: "你也学我？",
					id: "1579380109079126018",
					informationId: 1579036247949213700,
					likes: 0,
					member: {
						face:null,
					},
					pid: 1579376349321826300,
					replyNum: 0,
					status: 0,
					headerImg: '../../static/img/sportPurpose/three.png',
					username: 'C**执着',
					date: '2020-10-19',
					num: 4,
					praise: 24,
					commentsText: '持续的绿色投资驱动下，过去十年，中国在可再生能源、电动车等领域的技术创新脚步不断迈向新高度。',
					apply: [{
						headerImg: '../../static/img/sportPurpose/three.png',
						username: '跺脚的小蓝',
						date: '2020-10-19',
						praise: 24,
						commentsText: '持续的绿色投资驱动下，过去十年，中国在可再生能源、电动车等领域的技术创新脚步不断迈向新高度。',
					}, {
						headerImg: '../../static/img/sportPurpose/three.png',
						username: '跺脚的小蓝',
						date: '2020-10-19',
						praise: 24,
						commentsText: '持续的绿色投资驱动下，过去十年，中国在可再生能源、电动车等领域的技术创新脚步不断迈向新高度。',
					}]
				}]
			};
		},
		created() {
			this.commentList = [{
				face:null,
				member: {
					nickName: 'mingzi'
				},
				userEvaluateTime: '2010-10-11 12:00:00',
				grade: 5,
				userEvaluate: "在林肯当选总统那一刻，整个参议院的议员都感到很不服气，因为林肯的父亲是个鞋匠。而当时的参议员大都出身名门望族，自认为是上流人士",
			},
			{
				member: {
					nickName: 'mingzi'
				},
				userEvaluateTime: '2010-10-11 12:00:00',
				grade: 5,
				userEvaluate: "在林肯当选总统那一刻，整个参议院的议员都感到很不服气，因为林肯的父亲是个鞋匠。而当时的参议员大都出身名门望族，自认为是上流人士",
					
			}]
			console.log(this.commentList);
		},
		methods: {
			// 跳转到全部回复
			// toAllReply() {
			// 	uni.navigateTo({
			// 		url: '/pages/template/comment/reply'
			// 	});
			// },
			// 点赞
			async getLike(id) {
				let res = await API.informationCommentLike(id);
				if (res.code === 200) {
					this.commentList.forEach(v => {
						if (v.id === id) {
							v.likes++
							// console.log(v);
						}
					})
				} else {
					this.$refs.uToast.show({
						title: res.message,
					})

				}
				// this.commentList[index].isLike = !this.commentList[index].isLike;
				// if (this.commentList[index].isLike == true) {
				// 	this.commentList[index].likeNum++;
				// } else {
				// 	this.commentList[index].likeNum--;
				// }
			},
			// 评论列表
			// getComment() {
			// 	this.commentList = [{
			// 			id: 1,
			// 			name: '叶轻眉',
			// 			date: '12-25 18:58',
			// 			contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
			// 			url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
			// 			allReply: 12,
			// 			likeNum: 33,
			// 			isLike: false,
			// 			replyList: [{
			// 					name: 'uview',
			// 					contentStr: 'uview是基于uniapp的一个UI框架，代码优美简洁，宇宙超级无敌彩虹旋转好用，用它！'
			// 				},
			// 				{
			// 					name: '粘粘',
			// 					contentStr: '今天吃什么，明天吃什么，晚上吃什么，我只是一只小猫咪为什么要烦恼这么多'
			// 				}
			// 			]
			// 		}
			// 	];
			// },
			//评论分数的显示
			choose(num) {
				if (num) {
					this.commentsImg.current = num;
				}
				if (this.commentsImg.current == 1) {
					return "一"
				} else if (this.commentsImg.current == 2) {
					return "二"
				} else if (this.commentsImg.current == 3) {
					return "三"
				} else if (this.commentsImg.current == 4) {
					return "四"
				} else if (this.commentsImg.current == 5) {
					return "五"
				}
			},
			//删除评论图片
			delImg(index) {
				this.commentsImg.src.splice(index, 1);
			},
			//评论回复
			commentsApply(e) {
				console.log(1111,e);
				this.applyShow = true;
				if (e.children && e.children.length > 0) {
					data = e.children
					console.log("回复",this.applyData);
				}
			},
			//关闭评论回复
			applyClose() {
				this.applyShow = false;
			},
			submitComment() {
				console.log("提交",this.inputVal);
				this.applyShow = false;
				this.$refs.uToast.show({
					title: '评价成功',
					// type: 'info',
					icon: false,
				})
			}

		}
	};
</script>

<style lang="scss" scoped>
	@import "./comment.scss";
	.view-more{
		margin-bottom: 120rpx;
	}
</style>
